<template>
	<!-- 做完题统计 -->
	<view v-if="show" class="exercise-popup">
		<view class="popup-shadow" @touchmove.stop.prevent></view>
		<view class="popup-content" @touchmove.stop.prevent>
			<view class="main-content" @touchmove.stop.prevent>
				<view @tap="closeModal" class="iconfont icon-guanbi2"></view>
				<image class="img" :src="$common.userMainImg()" mode="aspectFill"></image>
				<view v-if="!(exercisePattern==3)" class="title">正确率<view class="num">{{statistics.accuracy}}%</view></view>
				<view v-else class="title">最后一题</view>
				<view v-if="!(exercisePattern==3)" class="list">
					<view class="item">
						<view>答对题目数量</view>
						<view class="right">{{statistics.right}}道</view>
					</view>
					<view class="item">
						<view>答错题目数量</view>
						<view class="right">{{statistics.wrong}}道</view>
					</view>
					<view class="item">
						<view>
							<view>答题用时</view>
							<view class="t1">未作答题目{{SUBJECTBYDEPT.length-statistics.all}}道</view>
						</view>
						<view class="right">{{exerciseTimeout || 0}}</view>
					</view>
				</view>
				<view v-else class="explain">
					<view class="text">已是该小节最后一题，是否要进入练习模式</view>
					<view class="date">
						<view>答题用时</view>
						<view>{{exerciseTimeout}}</view>
					</view>
				</view>
				<view v-if="type=='2' && statistics.accuracy>80" class="hint">恭喜正确率超过80%建议进入下一章</view>
				<view v-if="exercisePattern==3" class="btns">
					<button class="btn base-btn2" @click="closeModal">取消</button>
					<button class="btn base-btn1">练习刷题</button>
				</view>
				<view v-else-if="type=='2'" class="btns">
					<button class="btn base-btn2" @click="closeModal">取消</button>
					<button class="btn base-btn1" @click="next">下一章</button>
				</view>
				<view v-else-if="['1','3'].includes(type) || (statistics.accuracy<=80 && type=='2')" class="btns">
					<button class="btn base-btn2" @click="restart">重做</button>
					<button @click="restCreate" class="btn base-btn1">完成</button>
				</view>
			</view>
			<view v-if="!(exercisePattern==3) && isAI" class="bottom-btns">
				<button class="btn base-btn1" @click="goAiAnalyse">陶老师AI分析</button>
				<button class="btn base-btn2" @click="goAnswerSheet"><view class="iconfont icon-wenben_o"></view>答题卡</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"exercisePopup",
		data() {
			return {
				show: false,
				statistics: {
					accuracy: 0,
					all: 0,
					right: 0,
					wrong: 0,
				},
			}
		},
		props: {
			type: {
				type: String,
				default: '1'
			},
		},
		watch: {
			
		},
		computed: {
			SUBJECTBYDEPT() {
				return this.$store.state.SUBJECTBYDEPT;
			},
			exerciseList() {
				return this.$store.state.exerciseList;
			},
			exerciseTimeout() {
				let time=this.$store.state.exerciseTime;
				return time<60 ? time+'秒' : (time/60).toFixed(1)+'分';
			},
			exercisePattern() {//答题模式
				return this.$store.state.exercisePattern;
			},
			isAI() {//是否ai生成题
				return this.$store.state.isAI;
			},
		},
		created(){
		},
		mounted(){
			
		},
		methods: {
			// 完成
			restCreate(){
				this.$store.commit('set',['homeDataUpdata',true])
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			next(){
				uni.reLaunch({
					url: '/pagesC/selectChapter/index'
				});
			},
			getStatistics(){
				const exl=this.exerciseList;
				const list=this.SUBJECTBYDEPT;
				const right=list.filter((item,index)=>item.value==exl[index]).length;
				const wrong=list.filter((item,index)=>item.value!=exl[index] && exl[index]).length;
				console.log(this.statistics,'----107')
				Object.assign(this.statistics,{
					accuracy: (right+wrong)===0 ? 0 : (right/(right+wrong)*100).toFixed(0),
					all: right+wrong,
					right,
					wrong,
				})
			},
			openModal() {
			    this.show = true;
				this.getStatistics();
			},
			closeModal() {
			    this.show = false;
			    this.$emit('close'); // 触发关闭事件
			},
			// 重做
			restart(){
				this.closeModal();
				this.$store.commit('set',['sheetIndex',-1])
			},
			// 进入答题卡
			goAnswerSheet(){
				uni.navigateTo({
					url: `/pagesC/topicRelated/answerSheet?type=1`
				})
			},
			// ai分析
			goAiAnalyse(){
				uni.redirectTo({
					url: '/pagesA/aiAccuracy/analyse'
				});
			},
		},
		beforeDestroy(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.exercise-popup{
		position: fixed;
		z-index: 1111;
	}
	.exercise-popup,.popup-shadow{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.popup-shadow{
		background-color: rgba(0, 0, 0, 0.4); /* 黑色半透明 */
		backdrop-filter: blur(4px); /* 背景模糊 4px */
	}
	.popup-shadow,.popup-content{
		position: absolute;
	}
	.popup-content{
		top: 350rpx;
		left: 68rpx;
		right: 68rpx;
	}
	.main-content{
		position: relative;
		padding: 70rpx 26rpx 74rpx;
		background: linear-gradient( 180deg, #E3EAFF 0%, #F2F5FA 22%, #F3F3F3 53%, #F3F3F3 100%);
		border-radius: 30rpx;
		.icon-guanbi2{
			position: absolute;
			right: 0;
			top: -54rpx;
			font-size: 40rpx;
			color: #fff;
			cursor: pointer;
		}
		.img{
			position: absolute;
			left: 56rpx;
			top: -66rpx;
			width: 162rpx;
			height: 236rpx;
		}
		.title{
			display: flex;
			justify-content: center;
			padding-left: 180rpx;
			margin-bottom: 60rpx;
			font-size: 58rpx;
			font-weight: 600;
			.num{
				color: #F89C24;
			}
		}
		.list{
			font-size: 42rpx;
		}
		.item{
			display: flex;
			justify-content: space-between;
			padding: 0 44rpx 40rpx 44rpx;
			margin-bottom: 38rpx;
			border-bottom: 2rpx solid #eee;
			&:nth-child(1){
				.right{
					color: #4DCE8D;
				}
			}
			&:nth-child(2){
				.right{
					color: #FE3224;
				}
			}
		}
		.t1{
			margin-top: 18rpx;
			font-size: 32rpx;
			color: #969696;
		}
		.hint{
			margin-bottom: 58rpx;
			text-align: center;
			font-size: 28rpx;
			color: #4DCE8D;
		}
		.btns{
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			.btn{
				width: 236rpx;
				height: 84rpx;
				font-weight: 400;
				letter-spacing: 6rpx;
			}
			.base-btn1{
				background-color: #FAB45B;
			}
			.base-btn2{
				border-color: #969696;
				color: #969696;
			}
		}
	}
	.bottom-btns{
		display: flex;
		position: fixed;
		bottom: 96rpx;
		left: 26rpx;
		right: 26rpx;
		.btn{
			height: 96rpx;
			font-weight: 400;
			letter-spacing: 6rpx;
		}
		.base-btn1{
			width: 434rpx;
			background-color: #FAB45B;
		}
		.base-btn2{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 240rpx;
			border-color: #FAB45B;
			color: #FAB45B;
			background: none;
			.iconfont{
				font-size: 48rpx;
			}
		}
	}
	.explain{
		margin-bottom: 90rpx;
		.text{
			padding: 0 110rpx 0 42rpx;
			margin-bottom: 40rpx;
			padding-bottom: 40rpx;
			line-height: 82rpx;
			font-size: 42rpx;
			color: #333;
			border-bottom: 2rpx solid #eee;
		}
		.date{
			display: flex;
			justify-content: space-between;
			padding: 0 64rpx 0 36rpx;
			font-size: 42rpx;
			color: #969696;
		}
	}
</style>